iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

為期 30 天的 react 大冒險系列 第 5

react 大冒險-React 究竟是什麼-day 5

  • 分享至 

  • xImage
  •  

終於進入正題,
首先到 React 的官網 侵門踏戶

官方的介紹只有短短一句話
A JavaScript library for building user interfaces.
中文的意思就是
用來建構使用者介面的 js 函式庫
image alt
等等,我們不是說好 React 是 js 框架嗎?
image alt
對不起我騙你的
是這樣的,React 本身並不像 angular 那樣是完整的 framework,但搭配其他工具如 React Router, Webpack …型態上才趨近於框架

簡單來說

React 有以下幾個特點

  • 專注於 user-interface 的建構
  • react 本身有豐富的生態系 eco-system 來處理 routing / sending request
  • 以眾多 元件 component 為基底(component based architecture),構成頁面內容,將整個頁面拆分成小塊的元件渲染(render)出來
  • 因為由眾多元件構成頁面,所以也意味著 React 具有很大的彈性(flexibility)
  • 元件中可以包元件,較大的元件包含多個小型元件,藉由在元件間傳遞資料決定渲染出來的畫面及元素

舉例來說,一個部落格頁面
可能就由 導覽列元件、導覽列項目元件、搜尋框元件、側邊欄元件、單一文章元件...等等構成
image alt
一個大型的專案,甚至可能由數百個 component 交織而成

component 元件又是什麼

  • 構成使用者介面的片段 js 互動邏輯
  • 建構 React 的小單位
  • 相當於一些本身帶有將自身渲染成 html 內容方法的 class(類別)跟 function
  • 元件中可以包一個或多個元件(Components can be nested inside other components)
  • 元件與元件間互相依賴互動(rely & interact)
  • 可被重複使用(reuseable)的片段(snippets)

component 元件有兩種..

不管是哪一種 component,都要以大寫為開頭來命名

class component

  • 從 React component object 延伸而來(extending from React component object)
  • class component 上可以傳遞/接收 props (properties 的簡稱)跟改變 state的狀態
  • 會有 render method(用來回傳要渲染出的 html 內容) 以及 return 在其中
  • 寫法較 functional component 來的繁複
    一個簡單的 class component 長這樣..
class Welcome extends React.Component{
    render(){
        return <h1>{this.props.greeting}</h1>; // 其中的 this.props 就是 Welcome class 本身帶的 property
    }
}

functional component

  • 原本是 stateless,只能接收從上層傳下來的 props,但隨著 React Hook 的發展,也產生出類 stateful 的效果
  • 沒有 render只有 return
  • 寫法較簡短
  • 多半用來顯示訊息(display information),為 simple functional component 時的主要作用
  • 不能用 原生的 state / lifecycle method
    一個簡單的 functional component 長這樣..
function Welcome(props){
    return <h1>{props.greeting}</h1>; // 其中的 props 參數 就是接收從上層傳入的 prop
}

還記得前面複習 js 時提到的 arrow function 嗎?
既然叫做 functional component,就表示也能用 arrow function 來寫
上面的範例可以改寫為..

const Welcome = (props)=>{
    return (
        <h1>{props.greeting}</h1>
    );
}

快速認識了 React,是不是對他有更進一步的認識呢?
明天要進行的是 建立 React 專案的環境


上一篇
react 大冒險-快速複習 js 的語法 day 4
下一篇
react 大冒險-來建立 React 專案的環境吧-day 6(新增 更新 node / npm 版本)
系列文
為期 30 天的 react 大冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言